<template>
  <view class="container flex u-flex-col a-c">
    <u-form :model="form" ref="uForm" class="form">
      <view class="u-flex j-c">
        <u-image
          width="120rpx"
          height="120rpx"
          style="margin: 30rpx auto"
          border-radius="10rpx"
          src="/static/images/login/logo.png"
          mode=""
        >
        </u-image>
      </view>
      <view
        class="flex j-c"
        style="font-size: 40rpx; font-weight: bold; color: #369"
        >OrderAfricargo</view
      >

      <u-form-item left-icon="account">
        <u-input v-model="form.username" placeholder="input your username" />
      </u-form-item>
      <u-form-item left-icon="lock">
        <u-input
          type="password"
          v-model="form.password"
          placeholder="input your password"
        />
      </u-form-item>
      <u-form-item left-icon="lock">
        <u-input
          type="password"
          v-model="form.password_confirm"
          placeholder="input the password again"
        />
      </u-form-item>
      <u-button type="error" @click="handleLogin">Register Now</u-button>
      <view class="flex j-s">
        <navigator
          open-type="switchTab"
          url="/pages/main/tabbar/index/index"
          style="color: #ccc; padding: 10rpx 0"
        >
          Skip Login</navigator
        >
        <navigator
          url="/pages/main/account/phone-login"
          style="color: #ccc; padding: 10rpx 0"
        >
          Login Now</navigator
        >
      </view>
    </u-form>
  </view>
</template>

<script>
import md5Libs from "uview-ui/libs/function/md5";
import { SEND_SMS_INTERVAL } from "@/config";
import { HOME_PAGE_PATH } from "@/config/index";
import { TOKEN, REDIRECT_PATH, LOGIN_USER_INFO } from "@/config/constant";

let app = getApp();
export default {
  data() {
    return {
      form: {
        username: "",
        password: "",
        password_confirm: "",
      },
      waiting: false,
      limitSec: SEND_SMS_INTERVAL,
    };
  },
  onShow() {
    // if (this.$checkLogin()) this.$go2(HOME_PAGE_PATH, true)
  },
  methods: {
    async handleLogin() {
      if (!this.$u.test.rangeLength(this.form.username, [0, 6]))
        return this.$msg("Limit the account length to 6 characters");
      if (!this.$u.test.rangeLength(this.form.password, [0, 6]))
        return this.$msg("Limit the password length to 6 characters");
      if (this.form.password !== this.form.password_confirm)
        return this.$msg("The password is different from the last entry");
      try {
        let { success, data } = await this.$postB(
          "/user/register",
          {
            username: this.form.username,
            password: md5Libs.md5(this.form.password),
            password_confirm: md5Libs.md5(this.form.password_confirm),
          },
          false
        );
        if (success) {
          this.setCache(TOKEN, data);
          // let { data: userInfo } = await this.$get("/user/info");
          // this.setCache(LOGIN_USER_INFO, JSON.stringify(userInfo));
          this.$msg("注册成功", async () => {
            if (data) {
              uni.switchTab({
                url: "/pages/main/tabbar/mine/mine",
              });
            } else this.$redirectAfterLogin();
          });
        } else {
          this.$msg(data || "注册失败");
        }
      } catch (e) {
        // this.$msg("注册失败");
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.container {
  overflow: hidden;
}

.form {
  width: 80%;
  padding: 200rpx 0;

  /deep/ {
    .wx-btn {
      padding: 300rpx 0;
    }
  }
}
</style>
